<script>
import merge from 'lodash-es/merge.js';
export default {
  name: 'map-position',
  render() {
    return null;
  },
  props: {
    mapGetter: { type: Function, default: undefined },
    lnglat: { type: Array, default: () => [] },
    markerOption: { type: Object, default: () => ({}) },
  },
  watch: {
    lnglat: {
      immediate: true,
      deep: true,
      handler() {
        this.init();
      },
    },
  },
  created() {
    this.map = this.mapGetter();
  },
  methods: {
    init() {
      const [lng, lat] = this.lnglat;
      if (!lng || !lat) return;
      const { map } = this;
      if (!this.marker) {
        const opt = { map };
        this.marker = new AMap.Marker(merge({}, opt, this.markerOption));
      }
      this.marker.setPosition(new AMap.LngLat(lng, lat));
      setTimeout(() => {
        map.setFitView(this.marker);
      }, 300);
    },
  },
};
</script>

<style scoped></style>
